<template>
  <div class="username-display">
    <p v-if="username">{{ username }}</p>
    <p v-else>加载中...</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 接收账号 ID 作为 prop
const props = defineProps({
  accountId: {
    type: String,
    required: true
  }
});

const username = ref('');

// 模拟从 API 获取用户名
const fetchUsername = async (accountId) => {
  // 这里你可以替换成实际的 API 请求
  const userMap = {
    'user1': 'Alice',
    'user2': 'Bob',
    'user3': 'Charlie'
  };

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(userMap[accountId] || '未知用户');
    }, 1000);
  });
};

onMounted(async () => {
  username.value = await fetchUsername(props.accountId);
});
</script>

<style scoped>
    .username-display {
    font-size: 16px;
    color: #333;
    }
</style>